

<!-- 物流信息 -->
<template>
	<view>
		<!-- header部分 -->
		<view class='header-Container header-height'>
			<view class="header-bg"></view>
			<navHeader pageTitle="物流信息" colorTheme="black">
			</navHeader>
		</view>
		
		<!-- 订单信息 -->
		<view class="orderInfo">
			<view class="one-row">
				<text class="column">订单编号：</text><text class="value">{{orderId}}</text><text @click="copyToClipboardData(orderId)" class="copyBtn">复制</text>    
			</view>
			<view class="one-row">
				<text class="column">快递公司：</text><text class="value">{{supplierName || "未设置"}}</text>
			</view>
			<view class="one-row">
				<text class="column">快递单号：</text><text class="value">{{LogisticsData.showApiResBody.mailNo}}</text><text @click="copyToClipboardData(LogisticsData.showApiResBody.mailNo)" class="copyBtn">复制</text>    
			</view>
			<view class="sendDescLine">
			</view>
			<view class="one-row sendDesc-Container">
				<text class="column">发货备注：</text><text class="value">{{LogisticsRemarks || "无"}}</text>   
			</view>
		</view>
		
		
		<!-- 物流信息 -->
		<view class="logisticalInfo">
			<view class="example-body">
				<uniSteps :options="LogisticsData.showApiResBody.data" active-color="#FE5E49" :active="0" direction="column" />
			</view>
		</view>
	</view>
</template>

<script>
	import uniSteps from '@/components/uni-steps/uni-steps'
	import navHeader from '@/components/nav-header/nav-header';
	
	export default {
		components: {
			navHeader,
			uniSteps
		},
		data() {
			return {
				orderId: "",
				supplierName: "",
				LogisticsRemarks: "",
				LogisticsData: {
					showApiResBody: {
						expTextName: "",
						mailNo: ""
					}
				}
			};
		},
		onLoad(options) {
			
			this.orderId = options.orderId;
			let returnId = options.returnId;
			var that = this;
			let url = options.type == 'return'? '/OrderLogisticsApi/getReturnOrderLogisticsForApi' : '/OrderLogisticsApi/getOrderLogisticsForApi';
			
			that.$api.globalUtil.requestAjax({
				url: url,
				method: "POST",
				data: {
					orderId: that.orderId,
					returnId: returnId
				},
				success: function(res) {
					if (res.data.success) {
						if(res.data.response.kdLogisticsForm && res.data.response.kdLogisticsForm.showapiResCode == 0) {
							that.LogisticsData = res.data.response.kdLogisticsForm;
							that.supplierName = res.data.response.supplierName;
							that.LogisticsRemarks = res.data.response.remarks;
						}
					}
				}
			});
		},
		methods: {
			
			//复制到剪贴板
			copyToClipboardData(copyText) {
					
				var that = this;
				uni.setClipboardData({
				    data: copyText || "",
				    success: function () {
				        that.$api.msg("复制成功")
				    }
				});
			}
		}
	}
</script>

<style lang="less">
	
	page {
		background-color: #F5F5F5;
	}

	// header部分
	.header-Container {
		width: 100%;
		height: 176rpx;
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);
		
		.header-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background:#FFFFFF;
			box-shadow:0px 1rpx 1rpx 0px rgba(0, 0, 0, 0.08);
		}
	
		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
	
			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}
	
		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}
	
	
	//订单信息
	.orderInfo {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 30rpx;
		width: 100%;
		background-color: #FFFFFF;

		.one-row {
			display: flex;
			align-items: center;
			height: 40rpx;
			
			.column {
				font-size:24rpx;
				font-family:PingFang SC;
				// font-weight:500;
				color:#666666;
				line-height:34px;
			}
			
			.value {
				font-size:24rpx;
				font-family:PingFang SC;
				// font-weight:500;
				color:#333333;
				line-height:34px;
			}
			
			.copyBtn {
				display: inline-block;
				margin-left: 26rpx;
				width:64rpx;
				height:26rpx;
				line-height: 26rpx;
				text-align: center;
				background:rgba(0,0,0,0.3);
				border-radius:13rpx;
				font-size:20rpx;
				color:rgba(255,255,255,1);
			}
		}
	}
	
	
	// 发货备注
	.sendDescLine {
		margin: 0 auto;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		width: 690rpx;
		height: 1rpx;
		background: #EEEEEE;
	}
	.sendDesc-Container {
		align-items: flex-start !important;
		height: auto !important;
		
		.column {
			line-height: 20px !important;
		}
		.value {
			flex: 1;
			line-height: 20px !important;
			color: #333333;
		}
	}
	
	
	// 物流信息
	.logisticalInfo {
		margin-top: 20rpx;
		background: rgba(255,255,255,1);
	}
	/deep/.uni-steps__column-text {
		border-bottom-width: 1rpx;
		border-bottom-color: #EEEEEE;
	}
	/deep/.uni-steps__column-circle {
		margin: 0;
	}
	// /deep/.uni-steps__column-line--after {
	// 	background-color: #DBDBDB !important;
	// }
	// /deep/.uni-steps__column-line--before {
	// 	background-color: #DBDBDB !important;
	// }
	// /deep/.uni-steps__column-circle {
	// 	width:14rpx;
	// 	height:14rpx;
	// 	background:rgba(219,219,219,1);
	// 	border-radius:50%;
	// }
</style>




